<template>
	<view class="mask bs df-yc wh100">
		<view :class="[bgStyle,dfYc]">
			<view class="title ">
				<view v-if='false' class="light-title titleColor shsc fb">成功点亮整盒<text style="color: #BF2639;" class="mx20">清明茶</text></view>
				<view v-if='false' class="complex-title titleColor shsc fb">合成成功,获得一个<text style="color: #BF2639;" class="mx20">火茶碗</text></view>
				<view class="complex-gold shsc fb">合成成功,获得一个<text style="color: #FFCC31;" class="mx20">金茶碗</text></view>
			</view>
			<view v-if="false" class="complex mt24 df-c fs24">
				获得<text style="color: #BF2639;">土茶碗</text>奖励
			</view>
			<view class="notice">
				<view v-if="false" class="fs26 titleColor df-yc">
					<text>获得<text style="color: #BF2639;">土茶碗</text>奖励，升级到金茶碗可免费领取</text>
					<text>一个实体金碗</text>
				</view>
				
				<view v-if="false" class="titleColor fs26">
					成功集齐8个土茶碗，是否合成一个火茶碗？
				</view>
				
				<view v-if="false" class="titleColor fs26">
					茶碗升级到金茶碗可以免费领取一个<text style="color: #BF2639;">实体金碗</text>
				</view>
				
				<view v-if="true" class="white df-yc fs26">
					<text>到达茶能成事线下实体店出示金茶碗可免费</text>
					<view>领取<text style="color: #FFCC31;">黄金实体茶碗</text></view>
				</view>
			</view>
			<view class="image">
				<image v-if="true" class="getBowl" style="width: 258rpx;" src="../../../static/imgs/images/tcw.png" mode="widthFix"></image>
				<view v-if="false" class="complex-img df-c">
					<view class="left df-yc">
						<image style="width: 112rpx;" src="../../../static/imgs/images/tcw.png" mode="widthFix"></image>
						<view style="color: #482A2A;" class="num df-c fb fs22">土茶碗<text>x8</text></view>
					</view>
					<view class="mid">
						<image style="width: 67rpx;" src="../../../static/imgs/images/jt.png" mode="widthFix"></image>
					</view>
					<view class="right df-yc">
						<image style="width: 112rpx;" src="../../../static/imgs/images/hcw.png" mode="widthFix"></image>
						<view style="color: #482A2A;" class="num df-c fb fs22">火茶碗<text>x1</text></view>
					</view>
				</view>
			</view>
			<view class="buttons fb fs26 df-yc">
				<view :class="[btn,dfC,btnFill]">继续点亮</view>
				<text :class="[btn,dfC,btnColor]">了解活动规则 </text>
			</view>
			<view class="close">
				<image style="width: 46rpx;" :src="temImgUrl+'/close.png'" mode="widthFix">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Popup',
		components: {

		},
		data: function() {
			return {
				temImgUrl:this.$IMG_URL_TEMP,
				bgStyle:'gold',
				dfYc:'df-yc',
				dfC:'df-c',
				btn:'btn',
				btnFill:'btn-gold',
				btnColor:'btn-gold-color'
			}
		},
		computed:{
			popupStyle:function(){
				return {
					popup:true
				}
			}
		},
		methods: {},
		created() {},
		mounted() {},
	}
</script>

<style scoped lang="scss">
	.popup,.gold{
		width: 630rpx;
		height: 803rpx;
		background-image: url(#{$IMG_URL}/shmbg.jpg);;
		border-radius: 20rpx;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;
		.title{
			margin-top:60rpx;
			.light-title{
				font-size: 50rpx;
			}
			.complex-title{
				font-size: 46rpx;
			}
			.complex-gold{
				color: #FFF1E9;
				font-size: 46rpx;
				text-shadow: 0px 2rpx 2rpx rgba(94, 10, 18, 0.3);
				
			}
		}
		.complex{
			width: 246rpx;
			height: 60rpx;
			background: #FFD5B6;
			border-radius: 30rpx;
		}
		.notice{
			margin-top: 36rpx;
		}
		.image{
			margin-top: 70rpx;
			.complex-img{
				margin-bottom: 80rpx;
				.mid{
					margin: 0 38rpx;
				}
				.num{
					width: 148rpx;
					height: 49rpx;
					background: #FFD5B6;
					border-radius: 24rpx;
					margin-top: -16rpx;
				}
			}
		}
		.buttons{
			.btn{
				width: 493rpx;
				height: 90rpx;
			}
			.btn-fill{
				background: linear-gradient(270deg, #53181E, #7D333B);
				box-shadow: 0px 5rpx 18rpx 0px rgba(83, 24, 30, 0.35);
				border-radius: 45rpx;
				color: #FFE3CD;
			}
			.btn-gold{
				background: linear-gradient(1deg, #FFDEC3, #FFF1E9);
				border-radius: 45rpx;
				color: #642329;
			}
			.btn-color{
				color: #53181E;
			}
			.btn-gold-color{
				color: #FFE7D5;
			}
		}
	}
	.gold{
		width: 630rpx;
		height: 803rpx;
		border: 6rpx solid #DDBD51;
		background: linear-gradient(0deg, #6D1E26, #A94650);
		border-radius: 20rpx;
		position: relative;
	}
	.mask{
		padding-top: 300rpx;
		background-color: rgba($color: #000000, $alpha: 0.85);
	}
	.close{
		position: absolute;
		bottom: -100rpx;
	}

</style>
